<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Linker</title>
    <link rel="stylesheet" href="stylesheets/font-awesome.min.css">
    <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>
    <header>
        <div>
            <h1>Linker</h1>
            <p>A Place to Store Your Website</p>
        </div>
        <div id="logout">
        </div>
    </header>
    <main id="login">
        <label>Username</label>
        <input id="username" type="text" placeholder="enter your username">
        <div>
            <button id="loginBtn">Login</button>
        </div>
    </main>
    <main id="display">
        <section>
            <div>
                <button id="addLink">Add a Link</button>
            </div>
            <div id="editor">
                <div>
                    <label>Link</label>
                    <input id="link" type="text" placeholder="enter your link here">
                </div>
                <div>
                    <label>Tags</label>
                    <input id="tag" type="text" placeholder="seperate multi tags with ,">
                </div>
                <div>
                    <button id="confirm">confirm</button>
                    <button id="cancel">cancel</button>
                </div>
            </div>
        </section>
        <section>
            <ul id="taglist"></ul> 
            <ul id="linkers"></ul>
        </section>
    </main>
    <script src="javascripts/jquery.js"></script>
    <script src="javascripts/index.js"></script>
</body>
</html>